<template>
  <div class="common-layout">
    <el-container>
      <!--头部-->
      <el-header>
        <el-menu
            :default-active="activeIndex"
            class="HomeChoose"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
            router
        >
          <el-menu-item index="0">
            <img
                style="width: 60px"
                src="../assets/logo.png"
                alt="SC logo"
            />
          </el-menu-item>
          <div class="flex-grow"/>
          <el-menu-item index="home">
            <el-icon>
              <House/>
            </el-icon>
            首页
          </el-menu-item>
          <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.name}}</span></template>
            <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name">
              <el-icon>
                <component :is="child.icon"></component>
              </el-icon>
              {{child.name}}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="announcement">
            <el-icon>
              <Help/>
            </el-icon>
            我的消息
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon>
              <Phone/>
            </el-icon>
            联系我们
          </el-menu-item>


          <div class="IDpicture">
            <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
              <template #suffix>
                <el-icon class="el-input__icon">
                  <search/>
                </el-icon>
              </template>
            </el-input>
            <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
        </el-menu>

      </el-header>

      <!--主体-->
      <el-main>
        <el-row>
          <el-image style="width: 200px; height: 50px;margin-left: 8%;margin-top: 1%"
                    :src="require('@/assets/NEUSOFT.png')" :fit="fit"/>
          <el-input v-model="input2" class="searchGoods" placeholder="请输入搜索的商品">
            <template #suffix>
              <el-icon class="el-input__icon">
                <search/>
              </el-icon>
            </template>
          </el-input>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div>
              <el-card  style="font-size: 17px;margin-left: 23%" class="left-box">
                                <span><a href="链接地址1" class="category">手机/</a>
                                <a href="链接地址2" class="category">数码/</a>
                                    <a href="链接地址3" class="category">电脑/</a>
                                    <a href="链接地址4" class="category">办公</a>
                                </span><br/>
                <span>
                                    <a href="链接地址5" class="category">生活用品/</a>
                                    <a href="链接地址5" class="category">文具用品</a>
                                </span><br/>
                <span>
                                    <a href="链接地址5" class="category">男装/</a>
                                    <a href="链接地址5" class="category">女装/</a>
                                    <a href="链接地址5" class="category">童装</a>
                                    <a href="链接地址5" class="category">内衣</a>
                                </span><br/>
                <span>
                                    <a href="链接地址5" class="category">美妆/</a>
                                    <a href="链接地址5" class="category">个护清洁/</a>
                                    <a href="链接地址5" class="category">宠物</a>
                                </span><br/>
                <span>
                                    <a href="链接地址5" class="category">女鞋/</a>
                                    <a href="链接地址5" class="category">箱包/</a>
                                    <a href="链接地址5" class="category">钟表/</a>
                                    <a href="链接地址5" class="category">珠宝</a>
                                </span><br/>
                <span>
                                    <a href="链接地址5" class="category">男箱/</a>
                                    <a href="链接地址5" class="category">运动/</a>
                                    <a href="链接地址5" class="category">户外/</a>
                                    <a href="链接地址5" class="category">汽车</a>
                                </span><br/>
                <span>
                                    <a href="链接地址5" class="category">食品/</a>
                                    <a href="链接地址5" class="category">酒类/</a>
                                    <a href="链接地址5" class="category">生鲜/</a>
                                    <a href="链接地址5" class="category">特产</a>
                                </span><br/>
                <span>
                                    <a href="链接地址5" class="category">图书/</a>
                                    <a href="链接地址5" class="category">文娱/</a>
                                    <a href="链接地址5" class="category">教育/</a>
                                    <a href="链接地址5" class="category">电子书</a>
                                </span><br/>
                <span>
                                    <a href="链接地址5" class="category">母婴/</a>
                                    <a href="链接地址5" class="category">玩具/</a>
                                    <a href="链接地址5" class="category">乐器</a>
                                </span><br/>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-carousel :interval="5000" arrow="always" style="height: 300px; align-content: center">
                <el-carousel-item v-for="item in images" :key="item.id" style="height:100%">
                  <template #default>
                    <div class="imageroll">
                      <img :src="item.url" alt="Image" class="carousel-item-image"/>
                    </div>
                  </template>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-card class="right-box">
                <div class="profile">
                  <div class="block">
                    <el-avatar :size="100"/>
                    <div class="welcome" style="font-size: 20px">hi!</div>
                    <el-row>
                      <el-col :span="12">
                        <el-button class="fixed-width-buttons" type="primary" @click="goCollect">我的收藏</el-button>
                      </el-col>
                      <el-col :span="12">
                        <el-button class="fixed-width-buttons" type="primary" @click="goOrder">我的订单</el-button>
                      </el-col>
                    </el-row>
                    <el-row style="margin-top: 20px">
                      <el-col :span="12">
                        <el-button class="fixed-width-buttons" type="primary" @click="goCart">购物车</el-button>
                      </el-col>
                      <el-col :span="12">
                        <el-button class="fixed-width-buttons" type="primary" @click="goWallet">我的钱包</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 0;margin-right: 60px">
          <el-col v-for="(item, index) in goods"
                  :key="item.id"
                  :span="5"
                  :offset="1"
                  style="margin-top: 5%">
            <el-card class="goodsbox" :body-style="{height: '500px',padding:'0'}" style="max-height: 490px; width: 350px">
              <img :src="addSlash(item.goodsUrl)"
                   style="height: 70%;width: 100%"/>
              <div style="padding: 10px">
                <div style="font-family: Arial, sans-serif; font-size: 19px; font-weight: lighter; padding: 10px">{{item.goodsName}}</div>
                <div class="bottom">
                  <el-row><div style="font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; color: crimson;padding:10px"><span style="font-size: 20px;">￥</span>
                    {{item.goodsPrice}}</div>
                    <div style="position: absolute;margin-left: 130px;margin-top: 8px"><el-button  style="width: 80px;border-color:black;height: 40px"@click="toCollect(item)" type="" >收藏</el-button></div>
                    <div style="position: absolute;margin-left: 240px;margin-top: 8px"><el-button  style="width: 80px;height: 40px"@click="toShoppingCart(item)" type="primary">加入购物车</el-button></div>
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import *as allGoodsAPI from "../api/goods";
import {onMounted, ref} from 'vue'
import {useStore} from 'vuex'
import user from "@/store/user";
import router from "@/router";
import {ElMessage} from "element-plus";

const goods = ref([])
const activeIndex = ref('1')
const store=useStore()
const myCollect=ref({})
const totalCount = ref(10);
const handleSelect = (index) => {
  activeIndex.value = index;
}
const images = ref([
  {id: 1, url: require('@/assets/city1.jpg')},
  {id: 2, url: require('@/assets/city2.jpg')},
  {id: 3, url: require('@/assets/logo.png')}
])

const goOrder=()=>{
  router.push("/myorder")
}
const goCart=()=>{
  router.push("/shoppingcart")
}
const goWallet=()=>{
  router.push("/wallet")
}
const goCollect=()=>{
  router.push("/collect")
}


const toCollect=(item)=>{
  myCollect.value=item
  console.log(myCollect.value)
  allGoodsAPI.InsertCollect({goodsId:myCollect.value.goodsId,goodsName:myCollect.value.goodsName,goodsUrl:myCollect.value.goodsUrl,
    goodsCate:myCollect.value.goodsCate,goodsPrice: myCollect.value.goodsPrice,goodsSummary:myCollect.value.goodsSummary,
    storeId:myCollect.value.storeId,userId:store.getters.getId}).then((res)=>{
    console.log("成功添加收藏")
    console.log(res)
    console.log(store.getters.getId)
    console.log(myCollect.value.goodsUrl)
  })
  ElMessage({
    type:'success',
    message:'收藏成功',
  })
}

const toShoppingCart=(item)=>{
  myCollect.value=item
  console.log(myCollect.value)
  allGoodsAPI.InsertCart({goodsId:myCollect.value.goodsId,goodsName:myCollect.value.goodsName,goodsURL:myCollect.value.goodsUrl,
    cartNumber:1,goodsPrice: myCollect.value.goodsPrice,goodsSummary:myCollect.value.goodsSummary,
    storeId:myCollect.value.storeId,userId:store.getters.getId}).then((res)=>{
    console.log("成功添加购物车")
    console.log(res)
    console.log(store.getters.getId)
    console.log(myCollect.value.goodsUrl)
  })
  ElMessage({
    type:'success',
    message:'添加购物车成功',
  })
}


//页头多级菜单
const menu_data = ref([
  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/shop',
    child: [
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },

])
onMounted(() => {
  // allGoods().then((res) => {
  //     console.log(res,"2000")
  //     console.log(res.data)
  //     goods.value = res
  //     // totalCount.value=goods.value.length
  //     console.log(goods.value, "1000")
  // })
  allGoodsAPI.allGoods().then((res) => {
    goods.value = res.data;
    console.log(store.getters.getId)
  })
})
const addSlash = (url) => {
  return `/${url}`
}

</script>
<style>
.common-layout {
  width: 100%;
  height: 100%;
}

.common-layout .el-container {
  width: 100%;
  height: 100%;
}

.common-layout .el-header {
  background-color: white;
  height: 8%;
}

.common-layout .el-main {
  background-color: #FCFCFC;
  height: 70%;
  width: 100%;
}

/*商城走马灯*/
.el-carousel__item {
  margin-top: 3%;
}

.carousel-item-image {
  width: 100%; /* 图片宽度铺满父元素 */
  height: 100%; /* 高度自适应，保持图片比例 */
  object-fit: cover; /* 确保图片按比例铺满并裁剪溢出部分 */
}

.imageroll {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/*商品搜索框*/
.searchGoods {
  width: 46%;
  height: 50px;
  margin-left: 8%;
  margin-top: 30px;
  border-radius: 50px;
}

.searchFunction {
  height: 28px;
  width: 80%;
  right: 40px;
}

/*"左分类框"*/
.left-box {
  margin-top: 5%;
  margin-left: 10%;
  height: 300px;
  width: 280px;
  border-radius: 10px;
}

/*右头像框*/
.right-box {
  margin-top: 5%;
  margin-left: 13%;
  height: 300px;
  width: 280px;
  border-radius: 10px;
}

.block {
  flex: 1;
  text-align: center;
  margin-top: 10%;
}

.welcome {
  margin-top: 0;
}

/*卡片阴影*/
.el-card.is-always-shadow {
  box-shadow: 0px -2px 12px 0 rgba(0, 0, 0, 0.3);
}

/*头部边框阴影*/
.el-header {
  width: 100%;
}


.HomeChoose {
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
  display: flex;
}

.flex-grow {
  flex-grow: 0;
}

.IDpicture {
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%; /* 调整左右内边距 */
}

.button {
  width: 150px; /* 设置按钮的固定宽度 */
}

.fixed-width-buttons {
  width: 90px; /* 设置按钮的固定宽度 */
}
.bottom{
  position: absolute;
  bottom: 10px;
  left: 10px;

}
.goodsbox{
  position: relative;
}
.category {
  color: black;
  text-decoration: none; /* 如果不需要下划线，可以加上这行 */
}
</style>